<template>
  <div class="product">
    <span class="product-name">{{ productName }}</span>
    <button v-if="cartQuantity > 0" class="quantity-button" @click="decreaseQuantity">-</button>
    <span class="quantity">{{ cartQuantity }}</span>
    <button class="quantity-button" @click="addToCart">+</button>
  </div>
</template>

<script>
export default {
  props: ['productName', 'cartQuantity'],
  methods: {
    addToCart() {
      this.$emit('add-to-cart');
    },
    decreaseQuantity() {
      if (this.cartQuantity > 0) {
        this.$emit('decrease-quantity');
      }
    }
  }
};
</script>

<style scoped>
/* Add your CSS styles here */
</style>
